<template>
  <div class="caseRateDetails">
    <div :class="['detailsTop', `detailsTop${wuFlag ? 'W' : listData?.grade}`]">
      <img
        class="detailsTopImg"
        v-if="listData"
        :src="`https://static.tospurfang.com/dt-management/caseRate/Detail${
          wuFlag ? 'W' : listData?.grade
        }.png`" />
      <div class="detailsText">
        <h3>{{ housesName }}</h3>
        <div class="pingji">
          <p class="p1" v-if="!wuFlag">评级月份：{{ rateTimeVal }}</p>
          <p class="p3" v-else>
            <img
              style="vertical-align: -2px"
              src="https://static.tospurfang.com/dt-management/caseRate/tan.png" />
            当前案场暂不需要考核
          </p>
          <p class="p4">
            <span class="sp1">|</span>
            <span class="sp2" @click="levelRules">查看评级规则</span>
          </p>
        </div>
        <p class="p2">
          案场评级由「营销执行」、「客户管理」、「内容策划」、「案场管理」4个模块的最低评级产生
        </p>
      </div>
      <div class="detailsTime">
        <span>评级年月:</span>
        <DatePicker
          format="yyyy-MM"
          type="month"
          :clearable="false"
          :options="options1"
          v-model="rateTime"
          @on-change="timeChange"
          style="width: 200px" />
      </div>
    </div>
    <div class="tabClass">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tabBox', `tabBox${wuFlag ? 'W' : listData?.grade}`, { active: activeTab === index + 1 }]"
        @click="changeTab(index + 1)">
        {{ tab.name }}
        <span v-if="!wuFlag">{{ tab.grade }}级</span>
      </div>
    </div>
    <rate-details-config ref="rateDetailsConfig"></rate-details-config>
    <level-rules ref="levelRules"></level-rules>
  </div>
</template>

<script>
  import caseRateMgr from '@/biz/caseRate/caseRate'
  import rateDetailsConfig from './component/rateDetailsConfig.vue'
  import levelRules from './component/levelRules.vue'
  export default {
    components: {
      rateDetailsConfig,
      levelRules
    },
    data() {
      return {
        wuFlag: false,
        listData: null,
        housesName: '',
        tabs: [
          { name: '营销执行', grade: '' },
          { name: '客户管理', grade: '' },
          { name: '内容策划', grade: '' },
          { name: '案场管理', grade: '' }
        ],
        tabData: {
          1: 'marketingExecution',
          2: 'customerManage',
          3: 'contentPlanning',
          4: 'buildingManage'
        },
        activeTab: 1,
        rateTime: this.$route.query.timeVal
          ? this.$route.query.timeVal
          : `${new Date().getFullYear()}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}`,
        options1: {
          disabledDate(date) {
            const currentDate = new Date()
            const startOfCurrentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
            const startOfCurrentMonth1 = new Date(2023, 6, 1)
            return date >= startOfCurrentMonth || date < startOfCurrentMonth1
          }
        },
        rateTimeVal: ''
      }
    },
    created() {},
    mounted() {
      this.configList()
      this.rateTimeVal = this.rateTime.slice(0, 4) + '.' + this.rateTime.slice(-2)
    },

    methods: {
      levelRules() {
        this.$refs.levelRules.show()
      },
      timeChange(v) {
        this.rateTime = v
        this.rateTimeVal = this.rateTime.slice(0, 4) + '.' + this.rateTime.slice(-2)
        this.configList()
      },
      changeTab(index) {
        this.activeTab = index

        const selectedTabData = this.listData[this.tabData[this.activeTab]]
        if (selectedTabData) {
          this.$refs.rateDetailsConfig.show(selectedTabData, this.wuFlag)
        }
      },
      configAll() {
        let params = {}
        caseRateMgr.configList(params).then((res) => {
          this.wuFlag = true
          this.listData = res

          this.tabs[0].grade = this.listData['marketingExecution'].grade
          this.tabs[1].grade = this.listData['customerManage'].grade
          this.tabs[2].grade = this.listData['contentPlanning'].grade
          this.tabs[3].grade = this.listData['buildingManage'].grade

          const selectedTabData = this.listData[this.tabData[this.activeTab]]
          if (selectedTabData) {
            this.$refs.rateDetailsConfig.show(selectedTabData, this.wuFlag)
          }
        })
      },
      configList() {
        let reg1 = new RegExp('-', 'g')
        let params = {
          countYm: this.rateTime.replace(reg1, ''),
          buildingId: this.$route.query.buildingId
        }
        caseRateMgr
          .buildingGradeDetails(params)
          .then((res) => {
            this.housesName = res.housesName
            if (res.grade != '暂无') {
              this.wuFlag = false
              this.listData = res
              this.tabs[0].grade = this.listData['marketingExecution'].grade
              this.tabs[1].grade = this.listData['customerManage'].grade
              this.tabs[2].grade = this.listData['contentPlanning'].grade
              this.tabs[3].grade = this.listData['buildingManage'].grade

              const selectedTabData = this.listData[this.tabData[this.activeTab]]
              if (selectedTabData) {
                this.$refs.rateDetailsConfig.show(selectedTabData, this.wuFlag)
              }
            } else {
              this.configAll()
            }
          })
          .catch((err) => {})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .caseRateDetails {
    background: #f6f7f9;
    min-height: 100vh;
    padding: 0 20px;
    .detailsTop {
      height: 143px;
      border-radius: 9px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 13px 30px;
      .detailsTopImg {
        display: block;
        width: 108px;
        height: 107px;
      }
      .detailsText {
        margin-left: 26px;
        flex: 1;
        h3 {
          font-size: 28px;
          padding-top: 10px;
        }
        .p2 {
          margin-top: 20px;
        }
        .p3 {
          font-size: 14px;
          font-weight: 400;
          color: #ff8508;
          line-height: 20px;
        }
        .pingji {
          display: flex;
          flex-direction: row;
          .p1 {
            margin-top: 2px;
          }
          .p4 {
            .sp1 {
              vertical-align: 1px;
              font-weight: bold;
              padding: 0 16px;
            }
            .sp2 {
              cursor: pointer;
            }
          }
        }
      }
      .detailsTime {
        width: 300px;
        padding-top: 67px;
        span {
          margin-right: 15px;
          line-height: 32px;
        }
      }
    }
    .detailsTopA {
      background: linear-gradient(135deg, #ffe7c6 0%, #f4b455 100%);
      color: rgba(112, 71, 10, 1);
      .p4 .sp2 {
        color: #cf8313 !important;
      }
    }
    .detailsTopB {
      background: linear-gradient(135deg, #d9e2f8 0%, #a2afd3 100%);
      color: rgba(27, 34, 62, 1);
      .p4 .sp2 {
        color: #2948c7 !important;
      }
    }
    .detailsTopC {
      background: linear-gradient(135deg, #ffe7dd 0%, #f0ad84 100%);
      color: rgba(129, 44, 1, 1);
      .p4 .sp2 {
        color: #df5c19 !important;
      }
    }
    .detailsTopD {
      background: linear-gradient(135deg, #e7eaed 0%, #aeb3bb 100%);
      color: rgba(33, 34, 38, 1);
      .p4 .sp2 {
        color: #334bac !important;
      }
    }
    .detailsTopW {
      background: linear-gradient(135deg, #e7eaed 0%, #aeb3bb 100%);
      color: rgba(33, 34, 38, 1);
      .p4 .sp2 {
        color: #3e4e8e !important;
      }
    }
    .tabClass {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 800px;
      margin-top: 20px;
      .tabBox {
        width: 180px;
        height: 52px;
        line-height: 52px;
        color: #fff;
        // text-align: center;
        padding-left: 50px;
        position: relative;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: bold;
      }
      .tabBox:nth-child(1)::before {
        content: ' ';
        width: 24px;
        height: 22px;
        background: url('https://static.tospurfang.com/dt-management/caseRate/DetailIcon1.png') no-repeat;
        position: absolute;
        top: 17px;
        left: 18px;
      }
      .tabBox:nth-child(2)::before {
        content: ' ';
        width: 20px;
        height: 24px;
        background: url('https://static.tospurfang.com/dt-management/caseRate/DetailIcon2.png') no-repeat;
        position: absolute;
        top: 14px;
        left: 23px;
      }
      .tabBox:nth-child(3)::before {
        content: ' ';
        width: 20px;
        height: 24px;
        background: url('https://static.tospurfang.com/dt-management/caseRate/DetailIcon3.png') no-repeat;
        position: absolute;
        top: 14px;
        left: 23px;
      }
      .tabBox:nth-child(4)::before {
        content: ' ';
        width: 25px;
        height: 24px;
        background: url('https://static.tospurfang.com/dt-management/caseRate/DetailIcon4.png') no-repeat;
        position: absolute;
        top: 14px;
        left: 20px;
      }
      .tabBoxA {
        background: rgba(240, 190, 122, 1);
      }
      .tabBoxA.active {
        background-color: rgba(218, 135, 13, 1);
      }
      .tabBoxB {
        background: rgba(183, 194, 224, 1);
      }
      .tabBoxB.active {
        background-color: rgba(121, 134, 161, 1);
      }
      .tabBoxC {
        background: rgba(239, 196, 182, 1);
      }
      .tabBoxC.active {
        background-color: rgba(209, 103, 71, 1);
      }
      .tabBoxD {
        background: rgba(192, 194, 204, 1);
      }
      .tabBoxD.active {
        background-color: rgba(125, 129, 142, 1);
      }
      .tabBoxW {
        background: #c0c2cc;
      }
      .tabBoxW.active {
        background-color: #7d818e;
      }
    }
  }
</style>
